// src/components/createAccount/CreateAccountForm.tsx

import { useCreateAccountForm } from '@/hooks/useCreateAccountForm';
import ConfirmCreateAccountModal from '@/components/createAccount/ConfirmCreateAccountModal';
import { useState } from 'react';
import { FaEye, FaEyeSlash, FaEnvelope, FaLock, FaExclamationTriangle } from 'react-icons/fa';

export const CreateAccountForm = () => {
  const {
    firstName, setFirstName,
    lastName, setLastName,
    email, setEmail,
    password, setPassword,
    emailError, passwordError,
    firstNameError, lastNameError,
    generalError, successMessage,
    register
  } = useCreateAccountForm();

  const [showConfirm, setShowConfirm] = useState(false);
  const [showPassword, setShowPassword] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const handleCreateClick = (e: React.FormEvent) => {
    e.preventDefault();
    setShowConfirm(true);
  };

  const handleConfirm = async () => {
    setShowConfirm(false);
    setIsLoading(true);
    await register();
    setIsLoading(false);
  };

  return (
    <>
      <form onSubmit={handleCreateClick} className="space-y-6" aria-label="Register form">
        <div className="flex gap-4">
          <div className="flex-1">
            <label htmlFor="firstName" className="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">First Name</label>
            <input
              id="firstName"
              type="text"
              value={firstName}
              onChange={(e) => setFirstName(e.target.value)}
              className={`w-full px-4 py-3 border-2 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 ${firstNameError ? 'border-red-300 dark:border-red-500 bg-red-50 dark:bg-red-900/20' : 'border-gray-300 dark:border-slate-600 hover:border-gray-400 dark:hover:border-slate-500 bg-white dark:bg-slate-800'
                }`}
              disabled={isLoading}
              placeholder="Enter first name"
            />
            {firstNameError && (
              <p className="text-sm text-red-600 dark:text-red-400 mt-2 flex items-center gap-2">
                <FaExclamationTriangle className="w-4 h-4" />
                {firstNameError}
              </p>
            )}
          </div>
          <div className="flex-1">
            <label htmlFor="lastName" className="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">Last Name</label>
            <input
              id="lastName"
              type="text"
              value={lastName}
              onChange={(e) => setLastName(e.target.value)}
              className={`w-full px-4 py-3 border-2 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 ${lastNameError ? 'border-red-300 dark:border-red-500 bg-red-50 dark:bg-red-900/20' : 'border-gray-300 dark:border-slate-600 hover:border-gray-400 dark:hover:border-slate-500 bg-white dark:bg-slate-800'
                }`}
              disabled={isLoading}
              placeholder="Enter last name"
            />
            {lastNameError && (
              <p className="text-sm text-red-600 dark:text-red-400 mt-2 flex items-center gap-2">
                <FaExclamationTriangle className="w-4 h-4" />
                {lastNameError}
              </p>
            )}
          </div>
        </div>

        <div className="flex flex-col gap-2">
          <label htmlFor="email" className="text-sm font-semibold text-gray-700 dark:text-gray-200">Email Address</label>
          <div className="relative">
            <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
              <FaEnvelope className="h-5 w-5 text-gray-400 dark:text-gray-500" />
            </div>
            <input
              id="email"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className={`w-full pl-12 pr-4 py-3 border-2 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 ${emailError ? 'border-red-300 dark:border-red-500 bg-red-50 dark:bg-red-900/20' : 'border-gray-300 dark:border-slate-600 hover:border-gray-400 dark:hover:border-slate-500 bg-white dark:bg-slate-800'
                }`}
              placeholder="Enter email address"
              required
              disabled={isLoading}
            />
          </div>
          {emailError && (
            <p className="text-sm text-red-600 dark:text-red-400 mt-2 flex items-center gap-2">
              <FaExclamationTriangle className="w-4 h-4" />
              {emailError}
            </p>
          )}
        </div>

        <div className="flex flex-col gap-2">
          <label htmlFor="password" className="text-sm font-semibold text-gray-700 dark:text-gray-200">Password</label>
          <div className="relative">
            <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
              <FaLock className="h-5 w-5 text-gray-400 dark:text-gray-500" />
            </div>
            <input
              id="password"
              type={showPassword ? 'text' : 'password'}
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className={`w-full pl-12 pr-12 py-3 border-2 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 ${passwordError ? 'border-red-300 dark:border-red-500 bg-red-50 dark:bg-red-900/20' : 'border-gray-300 dark:border-slate-600 hover:border-gray-400 dark:hover:border-slate-500 bg-white dark:bg-slate-800'
                }`}
              placeholder="Enter password"
              required
              disabled={isLoading}
            />
            <button
              type="button"
              onClick={() => setShowPassword(!showPassword)}
              className="absolute inset-y-0 right-0 pr-4 flex items-center text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-200"
              disabled={isLoading}
            >
              {showPassword ? <FaEyeSlash className="h-5 w-5" /> : <FaEye className="h-5 w-5" />}
            </button>
          </div>
          <small className="text-xs text-gray-500 dark:text-gray-400 mt-1 leading-relaxed">
            Must be at least 8 characters with letters, numbers, and symbols.
          </small>
          {passwordError && (
            <p className="text-sm text-red-600 dark:text-red-400 mt-2 flex items-center gap-2">
              <FaExclamationTriangle className="w-4 h-4" />
              {passwordError}
            </p>
          )}
        </div>

        <button
          type="submit"
          className={`w-full py-4 px-6 rounded-xl font-semibold text-white transition-all duration-300 transform ${isLoading
              ? 'bg-gray-400 dark:bg-slate-600 cursor-not-allowed'
              : 'bg-blue-600 dark:bg-cyan-700 hover:bg-blue-700 dark:hover:bg-cyan-800 hover:shadow-xl hover:scale-[1.02] active:scale-[0.98] shadow-lg'
            }`}
          disabled={isLoading}
        >
          {isLoading ? (
            <div className="flex items-center justify-center gap-3">
              <svg className="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
              </svg>
              Creating Account...
            </div>
          ) : (
            'Create Account'
          )}
        </button>

        {generalError && (
          <p className="text-sm text-red-600 dark:text-red-400 text-center mt-3 flex items-center justify-center gap-2 bg-red-50 dark:bg-red-900/20 p-3 rounded-xl border border-red-200 dark:border-red-800">
            <FaExclamationTriangle className="w-4 h-4" />
            {generalError}
          </p>
        )}

        {successMessage && (
          <p className="text-sm text-green-600 dark:text-green-400 text-center mt-3 bg-green-50 dark:bg-green-900/20 p-3 rounded-xl border border-green-200 dark:border-green-800">
            {successMessage}
          </p>
        )}
      </form>

      <ConfirmCreateAccountModal
        open={showConfirm}
        onClose={() => setShowConfirm(false)}
        onConfirm={handleConfirm}
        formData={{ firstName, lastName, email, password }}
      />
    </>
  );
};

export default CreateAccountForm;